<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('billing.ddmx')" :leftIcon="true"></navbar>

		<view class="order-details-card" v-if="!loading">
			<view class="order-id">
				<text>{{ t('billing.ddh') }}：</text>
				<view class="id-copy">
					<text>{{ orderDetail.orderId || '--' }}</text>
					<image src="/static/icon/copy-icon.svg" class="copy-icon" @click="copyOrderId"></image>
				</view>
			</view>

			<view class="product-header">
				<text class="product-name">{{ formatProductName(orderDetail.productName || '质押产品') }}</text>
				<view class="status-tag" :class="getStatusClass(orderDetail.status)">{{ orderDetail.statusLabel || getStatusText(orderDetail.status) }}</view>
			</view>

			<view class="details-row">
				<view class="detail-item">
					<text class="detail-label">{{ t('billing.gmje') }}：</text>
					<text class="detail-value">{{ orderDetail.amount || '0.00' }}</text>
				</view>

				<view class="detail-item">
					<text class="detail-label">{{ t('billing.zq') }}：</text>
					<text class="detail-value">{{ orderDetail.cycle || '0' }}天</text>
				</view>

				<view class="detail-item">
					<text class="detail-label">{{ t('billing.ll') }}：</text>
					<text class="detail-value rate">{{ orderDetail.rate || '0' }}%</text>
				</view>

				<view class="detail-item">
					<text class="detail-label">{{t('billing.dqsy')}}：</text>
					<text class="detail-value profit">{{ orderDetail.totalProfit >= 0 ? '+' : '' }}{{ orderDetail.totalProfit || '0' }}</text>
				</view>
				<view class="time-info">
					<view class="time-item">
						<text class="time-label">{{ t('position.cjsj') }}：</text>
						<text class="time-value">{{ formatTimestamp(orderDetail.createTime) || '--' }}</text>
					</view>

					<view class="time-item">
						<text class="time-label">{{ t('position.jssj') }}：</text>
						<text class="time-value">{{ formatTimestamp(orderDetail.endTime) || '--' }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载状态 -->
		<view class="loading-container" v-if="loading">
			<text class="loading-text">加载中...</text>
		</view>
	</view>
</template>

<script setup>
	import {
		useI18n
	} from 'vue-i18n';
	import {
		ref,
		onMounted
	} from 'vue';
	import { pledgeApi } from '@/utils/api.js';
	import { formatProductName } from '@/components/k_line/utils/tool.js';
	
	const {
		t,
		locale
	} = useI18n();

	// 响应式数据
	const orderDetail = ref({});
	const loading = ref(false);
	const orderId = ref('');

	// 获取页面参数
	onMounted(() => {
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		const options = currentPage.options;
		
		if (options.id) {
			orderId.value = options.id;
			fetchOrderDetail();
		} else {
			uni.showToast({
				title: '订单ID不能为空',
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}
	});

	// 获取订单详情
	const fetchOrderDetail = async () => {
		if (!orderId.value) return;
		
		loading.value = true;
		try {
			const response = await pledgeApi.getOrderDetail(orderId.value);
			
			if (response.code === 0 && response.data) {
				orderDetail.value = response.data;
			} else {
				uni.showToast({
					title: response?.msg || '获取订单详情失败',
					icon: 'none'
				});
			}
		} catch (error) {
			uni.showToast({
				title: '网络请求失败',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	};

	// 格式化时间戳
	const formatTimestamp = (timestamp) => {
		if (!timestamp) return '';
		const date = new Date(timestamp);
		return date.toLocaleString('zh-CN', {
			year: 'numeric',
			month: '2-digit',
			day: '2-digit',
			hour: '2-digit',
			minute: '2-digit',
			second: '2-digit'
		});
	};

	// 格式化状态
	const getStatusText = (status) => {
		const statusMap = {
			0: t('billing.jxz'), // 进行中
			1: '已完成',
			2: '已取消'
		};
		return statusMap[status] || '未知状态';
	};

	// 获取状态样式类
	const getStatusClass = (status) => {
		const classMap = {
			0: 'in-progress',
			1: 'completed',
			2: 'cancelled'
		};
		return classMap[status] || 'in-progress';
	};

	// 复制订单号
	const copyOrderId = () => {
		const orderNum = orderDetail.value.orderId || orderId.value;
		uni.setClipboardData({
			data: orderNum,
			success: () => {
				uni.showToast({
					title: t('common.fzcg'),
					icon: 'none'
				});
			}
		});
	};
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding: 69.77rpx 34.89rpx;
		box-sizing: border-box;
	}

	.order-details-card {
		background: rgba(255, 255, 255, 1);
		box-shadow: 1.74rpx 1.74rpx 5.23rpx rgba(102, 102, 102, 0.25);
		padding: 69.77rpx 0;
		text-align: center;
	}

	.order-id {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 27.91rpx;


		text {
			font-weight: 300;
			letter-spacing: 0rpx;
			line-height: 35.36rpx;
			color: rgba(0, 0, 0, 1);
			font-size: 24.42rpx;
		}

		.id-copy {
			display: flex;
			align-items: center;

			text {
				margin-right: 10rpx;
			}

			.copy-icon {
				width: 22.09rpx;
				height: 22.09rpx;
			}
		}
	}

	.product-header {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 69.77rpx;

		.product-name {
			font-size: 27.91rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 40.42rpx;
			color: rgba(51, 51, 51, 1);
			margin-right: 10.67rpx;
		}

		.status-tag {
			width: 101.17rpx;
			height: 33.14rpx;
			border-radius: 10.47rpx;
			font-size: 20.93rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 33.14rpx;
			color: rgba(255, 255, 255, 1);

			&.in-progress {
				background: rgba(13, 179, 100, 1);
				color: #fff;
			}

			&.completed {
				background: rgba(247, 56, 79, 1);
			}

			&.cancelled {
				background: rgba(153, 153, 153, 1);
			}
		}
	}

	.details-row {
		// display: grid;
		// grid-template-columns: 1fr 1fr;
		// gap: 30rpx 20rpx;
		// margin-bottom: 40rpx;
		padding-left: 158.73rpx;

		.detail-item {
			display: flex;
			// flex-direction: column;
			align-items: center;
			margin-bottom: 27.91rpx;

			.detail-label {
				font-size: 27.91rpx;
				font-weight: 300;
				letter-spacing: 0rpx;
				line-height: 40.42rpx;
				color: rgba(0, 0, 0, 1);
				width: 139.54rpx;
				text-align: left;
				margin-right: 29.65rpx;
			}

			.detail-value {
				font-size: 24.42rpx;
				font-weight: 500;
				letter-spacing: 0rpx;
				line-height: 35.36rpx;
				color: rgba(51, 51, 51, 1);

				&.rate {
					color: rgba(13, 179, 100, 1);
				}

				&.profit {
					color: rgba(13, 179, 100, 1);
				}
			}
		}
	}

	.time-info {
		font-size: 27.91rpx;
		font-weight: 300;
		color: rgba(0, 0, 0, 1);
		margin-top: 97.68rpx;

		.time-item {
			display: flex;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.time-label {
				// width: 160rpx;
			}

			.time-value {}
		}
	}

	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
		
		.loading-text {
			font-size: 28rpx;
			color: rgba(153, 153, 153, 1);
		}
	}
</style>